<template>
    <div class="container-fluid">
        <div class="row" v-loading="loading">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="item" v-for="item in regularMessages">
                                    <div class="row">
                                        <label>{{ item.title }}：</label>
                                        <span v-if="item.status">已启用</span>
                                        <span v-else>已停用</span>


                                        <el-button v-on:click="setStatus(item.uniqueId,0)" type="danger" size="small"
                                                   v-if="item.status">禁用
                                        </el-button>
                                        <el-button v-on:click="setStatus(item.uniqueId,1)" type="primary" size="small"
                                                   v-else>启用
                                        </el-button>

                                        <el-button type="primary" size="small"
                                                   @click="handleSpecialPush(item.uniqueId)">发送预览
                                        </el-button>
                                        <!--<button class="btn btn-error">发送预览</button>-->
                                    </div>
                                    <div class="row">
                                        <label>发送时间：</label>
                                        {{ item.sendTitle }}

                                        <template v-if="item.scheduleType !='time'">
                                            <el-time-select
                                                    v-model="item.startTime"
                                                    :picker-options="{start: '05:30',step: '00:15',end: '24:00'}"
                                                    placeholder="选择时间"
                                                    @change="getTime(item)"
                                            >
                                            </el-time-select>
                                            开始，
                                            <el-select v-model="item.endTime" @change="setEndTime(item)">
                                                <el-option
                                                        v-for="item in dayOrWeekOptions"
                                                        :key="item.id"
                                                        :label="item.value"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </template>
                                        <template v-else>
                                            <el-select v-model="item.endTime" @change="setEndTime(item)">
                                                <el-option
                                                        v-for="item in timeOptions"
                                                        :key="item.id"
                                                        :label="item.value"
                                                        :value="item.value"
                                                >
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </div>
                                    <div class="row" v-if="item.scheduleType !='time'">
                                        模板消息：{{ item.templateId }}
                                        <el-button v-on:click="editTemplate(item.uniqueId)" type="primary" size="small">
                                            设置
                                        </el-button>
                                        推送模式：{{ item.keyName }}
                                        <el-button type="primary" size="small" v-on:click="openDialogForm(item)">设置
                                        </el-button>
                                    </div>
                                    <div class="row">消息内容设置：
                                        <el-button type="primary" size="small" v-on:click="openMaterial(item.uniqueId)">
                                            设置
                                        </el-button>
                                    </div>
                                    <el-divider></el-divider>
                                </div>
                            </form>

                            <el-dialog title="设置推送模式" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">
                                    <el-form-item label="推送模式" :label-width="formLabelWidth">
                                        <el-select v-model="form.type" placeholder="请选择活动区域">
                                            <el-option
                                                    v-for="item in messageList"
                                                    :key="item.id"
                                                    :label="item.value"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="setType">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>


                        <!--下面部分-->
                        <div>
                            <p class="m-t-0 h4">素材推送任务</p>
                        </div>
                        <div style="border:1px solid #DCDFE6">
                            <form class="form-inline" onsubmit="return false;" style="margin:6px">
                                <div class="form-group">
                                    <label>任务标题</label>
                                    <input class="form-control" type="text" placeholder="任务标题" v-model="title">
                                </div>
                                <div class="form-group">
                                    <label>推送时间</label>
                                    <el-time-select
                                            placeholder="起始时间"
                                            v-model="startTime"
                                            :picker-options="{start: '03:00',step: '00:15',end:'24:00'}">
                                    </el-time-select>
                                    <el-time-select
                                            placeholder="结束时间"
                                            v-model="endTime"
                                            :picker-options="{start: '03:30',step: '00:15',minTime: startTime,end:'24:00'}">
                                    </el-time-select>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit" v-on:click="addMessage()">添加</button>
                                </div>
                            </form>
                        </div>

                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="title"
                                        label="任务标题"
                                        align="center"
                                        width="220">
                                </el-table-column>
                                <el-table-column
                                        label="推送时间"
                                        width="120">
                                    <template slot-scope="scope">
                                        {{scope.row.startTime}}-{{scope.row.endTime}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="消息内容"
                                        width="89">
                                    <template slot-scope="scope">
                                        <a @click="openMaterial(scope.row._id)" style="cursor:pointer;">设置</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="状态"
                                        width="80">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status">已启用</span>
                                        <span v-else>已停用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                >
                                    <template slot-scope="scope">

                                        <el-button size="mini" type="info" @click="setShow(scope.row._id,0)"
                                                   v-if="scope.row.isShow===1">前端隐藏
                                        </el-button>
                                        <el-button size="mini" type="success" @click="setShow(scope.row._id,1)"
                                                   v-if="!scope.row.isShow">前端显示
                                        </el-button>


                                        <el-button size="mini" @click="handlePush(scope.row._id)">发送预览</el-button>

                                        <el-button size="mini" type="success" @click="setStatus(scope.row._id,0)"
                                                   v-if="scope.row.status===1">禁用
                                        </el-button>
                                        <el-button size="mini" @click="setStatus(scope.row._id,1)"
                                                   v-if="!scope.row.status">启用
                                        </el-button>

                                        <el-button size="mini" @click="openDialogFormVisible(scope.row)">修改</el-button>

                                        <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除
                                        </el-button>
                                    </template>

                                </el-table-column>
                            </el-table>
                        </div>


                        <el-dialog title="任务设置" :visible.sync="dialogEditFormVisible" :close-on-click-modal="false">
                            <el-form :model="editForm" onsubmit="return false;">
                                <el-form-item label="任务标题" :label-width="formLabelWidth">
                                    <input class="form-control" type="text" placeholder="任务标题" v-model="editForm.title">
                                </el-form-item>

                                <el-form-item label="推送时间" :label-width="formLabelWidth">
                                    <el-time-select
                                            placeholder="起始时间"
                                            v-model="editForm.startTime"
                                            :picker-options="{start: '03:00',step: '00:15',end:'24:00'}">
                                    </el-time-select>
                                    <el-time-select
                                            placeholder="结束时间"
                                            v-model="editForm.endTime"
                                            :picker-options="{start: '03:30',step: '00:15',minTime: editForm.startTime,end:'24:00'}">
                                    </el-time-select>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="updateMessage">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../../api/public.js';
    export default {
        name: "MessageComponent",
        data() {
            return {
                time_select: '',
                loading: false,
                isPay: 1,
                dayOrWeekOptions: [],
                timeOptions: [],
                messageList: [],
                regularMessages: [],
                formLabelWidth: '120px',
                form: {
                    type: 0,
                    uniqueId: ''
                },
                dialogFormVisible: false,
                list: [],
                title: '',
                startTime: '',
                endTime: '',
                editForm:{
                    title:'',
                    startTime:'',
                    endTime:'',
                },
                id: '',
                dialogEditFormVisible:false
            }
        },
        methods: {
            ...common,
            getInfo: function () {
                let self = this;
                let uri = "message/post-list";
                let data = {};
                self.loading = true;

                axios.post(uri,data).then(function (result) {
                    self.messageList = result.messageList;
                    self.dayOrWeekOptions = result.dayOrWeekOptions;
                    self.timeOptions = result.timeOptions;
                    self.regularMessages = result.regularMessages;
                    self.list = result.list;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            setStatus: function (id, status) {
                let self = this;
                let uri = "message/set-status/" + id + '/' + status;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            setShow:function(id,status){
                let self = this;
                let uri = "message/set-show/" + id + '/' + status;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            setTemplateId: function (id, status) {
                let self = this;
                let uri = "message/set-template/" + id + '/' + status;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            setType: function () {
                let self = this;
                let uri = "message/set-type/" + self.form.uniqueId + '/' + self.form.type;
                self.loading = true;
                self.dialogFormVisible = false;

                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            editTemplate: function (id) {
                this.$prompt('请输入模板信息ID', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,
                    inputPattern: /\S/,
                    inputErrorMessage: '模板信息ID不能为空'

                }).then(({value}) => {
                    this.setTemplateId(id, value);
                    return;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            openDialogForm: function (item) {
                let self = this;
                self.form.type = item.type;
                self.form.uniqueId = item.uniqueId;

                self.dialogFormVisible = true;
            },
            getTime: function (item) {
                let self = this;
                let uri = "message/set-start/" + item.uniqueId + '/' + item.startTime;
                let data = {};
                self.loading = true;
                self.dialogFormVisible = false;

                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            setEndTime: function (item) {
                let self = this;
                let uri = "message/set-end/" + item.uniqueId + '/' + item.endTime;
                self.loading = true;
                self.dialogFormVisible = false;

                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            openEdit(id) {
                this.openMaterial(id);
            },
            openMaterial(id) {
                this.openUri('message/' + id + '/material-edit');
            },
            addMessage() {
                let self = this;
                let uri = "message/store";

                if (!self.title) {
                    self.$message.error("必须填写任务标题");
                    return;
                }
                if (!self.startTime) {
                    self.$message.error("必须填写开始时间");
                    return;
                }
                if (!self.endTime) {
                    self.$message.error("必须填写结束时间");
                    return;
                }
                let data = {
                    title: self.title,
                    startTime: self.startTime,
                    endTime: self.endTime,
                    messageType: 'regular'
                };
                self.loading = true;

                axios.post(uri, data).then(function (result) {
                    self.loading = false;
                    if (result) {
                        self.title = '';
                        self.tags = [];
                        self.getInfo();
                    } else {
                        self.$message.error("创建信息失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除" + row.title + ", 是否继续?";
                self.$confirm(tipStr, '关键词回复删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "message/" + id;

                axios.delete(uri,function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handlePush: function (id) {
                let self = this;

                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3456789]\d{9}$/,
                    inputErrorMessage: '手机号码格式不正确'
                }).then(({value}) => {
                    let uri = "message/push/" + id + '/' + value;
                    axios.get(uri).then(function (result) {
                        console.log(result);
                    }).catch(function (error) {
                        self.loading = false;
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },
            handleSpecialPush: function (id) {
                let self = this;
                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3456789]\d{9}$/,
                    inputErrorMessage: '手机号码格式不正确'
                }).then(({value}) => {
                    let uri = "message/special-push/" + id + '/' + value;
                    this.get(uri,function (result) {
                        console.log(result);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },
            openDialogFormVisible(row) {
                this.dialogEditFormVisible = true;
                this.editForm.title = row.title;
                this.editForm.startTime = row.startTime;
                this.editForm.endTime = row.endTime;
                this.id = row._id;
            },
            updateMessage() {
                let self = this;
                if (!self.editForm.title) {
                    self.$message.error("必须填写任务标题");
                    return;
                }
                if (!self.editForm.startTime) {
                    self.$message.error("必须填写开始时间");
                    return;
                }
                if (!self.editForm.endTime) {
                    self.$message.error("必须填写结束时间");
                    return;
                }
                let uri = "message/time-message/" + self.id;
                self.loading = true;
                this.dialogEditFormVisible = false;

                axios.put(uri, self.editForm).then(function (result) {
                    self.loading = false;
                    if (result) {
                        self.getInfo();
                    } else {
                        self.$message.error("更新信息失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            }
        },
        mounted() {
            this.getInfo();
        }
    }
</script>

<style scoped>
    .item .row {
        margin-bottom: 30px;
        margin-left: 0;
    }

    .el-button--medium {
        margin-left: 30px;
    }
</style>
